<template>
    <div class="keyboard_pop" @click.self="show=false" v-if="show">
        <ul class="keyboard">
            <li v-for="(key,index) in keyList" :key="index" track-by="$index" :class="{delete: key === 'Delete', capslock: key === 'Caps',  space: key === 'Space',  capsed: (key === 'Caps') && hasCapsed }" v-text="key" @click="clickKey(key)"></li>
        </ul>
    </div>
</template>
<script>
export default {
  props: {
    isShows: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      show: false,
      keyList: [],
      normalKeyList: [],
      capsedKeyList: [],
      hasCapsed: false,
      keyvalue: this.keyboardtext
    }
  },
  created () {
    this.ready()
  },
  watch: {
    isShows (val) {
      this.show = val
    }
  },
  methods: {
    clickKey (key) {
      switch (key) {
        case 'Delete':
          let kbt = this.keyvalue
          this.keyvalue = kbt.length ? kbt.substring(0, kbt.length - 1) : kbt
          break
 
        case 'Space':
          this.keyvalue += ' '
          break
 
        case 'Caps':
          this.hasCapsed = !this.hasCapsed
          this.keyList = this.hasCapsed ? this.capsedKeyList : this.normalKeyList
          break
 
        default:
          this.keyvalue += key
          break
      }
      this.$emit('updatekey', this.keyvalue)
    },
    ready () {
      let normalKeyList = [
        'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p',
        'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l',
        'z', 'x', 'c', 'v', 'b', 'n', 'm', '-',
        'Caps', "'s", 'Space', 'Delete'
      ]
 
      let capsedKeyList = [
        'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P',
        'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L',
        'Z', 'X', 'C', 'V', 'B', 'N', 'M', '-',
        'Caps', "'s", 'Space', 'Delete'
      ]
 
      this.keyList = this.normalKeyList = normalKeyList
      this.capsedKeyList = capsedKeyList
    }
  }
 
}
</script>
 
<style lang="scss" scoped>
.keyboard_pop{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    height: 100vh;
}
.keyboard {
    margin: 0;
    padding: 0;
    list-style: none;
    user-select: none;
    background: #fff;
    box-shadow: 0 -3px 8px 5px #ddd;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 50px 75px;
 
    li {
        float: left;
        margin: 0 10px 10px 0;
        width: 160px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        background: #fff;
        border-radius: 15px;
        font-size: 32px;
        font-weight: 500;
        box-shadow: 0 3px 6px 0px #cac9c9;
 
        &:hover {
            position: relative;
            cursor: pointer;
            background: #03BA82;
            color: #fff;
        }
        &:active {
            top: 1px;
            left: 1px;
        }
    }
    li:nth-child(n+11){
        margin-left: 15px;
    }
    li:nth-child(-n+27):nth-child(n+20){
        margin-left: 36px;
    }
    .delete {
        width: 300px;
    }
    .capslock {
        // clear: left;
        width: 300px;
    }
    .space {
        width: 830px;
 
    }
    .capsed {
        position: relative;
        top: 1px;
        left: 1px;
        border-color: #e5e5e5;
        cursor: pointer;
    }
}
</style>